<template>
  <scroll-view @scrolltolower="getSchoolWallList" @scroll="onPageScroll" scroll-y style="height: 100vh;" class="flex-col page">
    <MyHeader titleColor="#fff" :paddingBottom="90" title="校园墙"
      background="url(https://bs-mini-program.oss-cn-hangzhou.aliyuncs.com/images/0/%E5%9B%BE%E7%89%87/3.png)">
    </MyHeader>
    <view :class="{fadeOutUp:!showFixNav && isScroll,fadeInDown:showFixNav}" class="fixHeader animated">
      <MyHeader background="linear-gradient(to bottom, #00aaff, #ffffff)" :paddingBottom="0" title="校园墙" titleColor="#fff" />
    </view>

    <view class="flex-col relative section_4">
      <view class="flex-col relative group_3">
        <view class="flex-col justify-start relative group_4">
          <view class="flex-col justify-start items-center text-wrapper">
            <text class="font_2 text_3">景德镇学院</text>
          </view>
          <image class="image_7 pos_3"
            src="https://bs-mini-program.oss-cn-hangzhou.aliyuncs.com/images/0/%E5%9B%BE%E7%89%87/logo.jpg" />
        </view>
        <view class="mt-8 flex-col">
          <!-- 每条校园墙信息 -->
          <view class="flex-col mt-4 section_5 list-item" v-for="(item, index) in schoolWallList" :key="index"
            @click="goDetail(item)">
            <view class="flex-col">
              <view class="flex-row justify-between items-center group_5">
                <view class="flex-row items-center">
                  <image class="shrink-0 image_8"
                    :src="item.userImage" />
                  <text class="font_4 ml-13">{{item.userName}}</text>
                </view>
                <text class="font_3 text_4">{{item.createTime}}</text>
              </view>
              <view class="mt-12 flex-col">
                <text class="self-start font_2">{{item.title}}</text>
                <text class="self-stretch font_5 mt-5">
                  {{item.content}}
                </text>
              </view>
            </view>
            <view class="mt-28 flex-col">
              <view class="flex-row equal-division img-box">
                <image v-for="(img,index) in item.imageUrlList" :key="index" class="image_9 equal-division-item"
                  :src="img" />
              </view>
              <view class="flex-row justify-between items-center group_6 mt-11">
                <view class="flex-row items-center">
                  <image class="shrink-0 image_10"
                    src="../svg/浏览.svg" />
                  <text class="font_6 ml-5">{{item.browse || 0}}</text>
                </view>
                <view class="flex-row items-center group_7 view">
                  <view  @click.stop="onLike(item)" class="flex-row justify-start items-center image-wrapper_2">
                    <image v-if="item.likes == 0" class="image_11" src="../svg/点赞前.svg" />
                    <image v-else class="image_11" src="../svg/点赞后.svg" />
                  </view>
                  <view class="flex-row justify-start items-center image-wrapper_2 view_3">
                    <text class="font text_5">{{item.likes || 0}}</text>
                  </view>
                  <view class="flex-row justify-start items-center image-wrapper_2 view_2">
                    <image class="image_12"
                      src="../svg/评论.svg" />
                  </view>
                  <view class="flex-row justify-start text-wrapper_2"><text class="font text_6">{{item.comments || 0}} </text></view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="mt-4 shrink-0 section_7"></view>
    </view>
  </scroll-view>
  <addNewInfo go="../postInfo/postInfo"></addNewInfo>
  
</template>

<script setup>
  import {
    onMounted,
    onBeforeUnmount,
    ref,
    reactive
  } from 'vue';
import { useScollShowNav } from '../../../composables';
import {onShow} from '@dcloudio/uni-app'
import { dianZAPI, getSchoolWallAPI } from '../../../apis/schoolWall';
import { isLoginAndGo } from '../../../utils';
  const schoolWallList = ref([])
  // 跳转详情
  const goDetail = (item) => {
    uni.navigateTo({
      url: '/otherpages/schoolWall/schoolWallDetaill/schoolWallDetaill?messageId=' + item.messageId
    })
  }
  // 获取列表
  const pageParams = reactive({
    page:1,
    pageSize:10
  })
  const getSchoolWallList = async () => {
    const res = await getSchoolWallAPI(pageParams)
    pageParams.page++
    schoolWallList.value = [...schoolWallList.value,...res.data.records]
  }
  const {
    showFixNav,
    onPageScroll,
    isScroll
  } = useScollShowNav(getSchoolWallList)
 
  onShow(async()=>{
    await isLoginAndGo('/otherpages/schoolWall/index/index')
    pageParams.page = 1
    schoolWallList.value = []
    getSchoolWallList()
  })
  // 点赞事件
  const onLike = async (item) => {
    item.likes++
    await dianZAPI({
      messageId:item.messageId,
      number:1
    })
  }
</script>

<style scoped lang="css">
  
  .ml-11 {
    margin-left: 22rpx;
  }

  .ml-13 {
    margin-left: 26rpx;
  }

  .mt-5 {
    margin-top: 10rpx;
  }

  .ml-7 {
    margin-left: 14rpx;
  }

  .mt-11 {
    margin-top: 22rpx;
  }

  .ml-5 {
    margin-left: 10rpx;
  }

  .page {
    background-color: #f7f8fa;
    height: 100%;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .section {
    padding: 36rpx 12rpx 336rpx 34rpx;
    background-image: url('https://ide.code.fun/api/image?token=676a0abcdefdb10011106942&name=4718f4111126d7c5a40cb3438c4bfa9b.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  .group {
    padding-left: 36rpx;
    padding-right: 16rpx;
  }

  .font {
    font-size: 28rpx;
    font-family: SourceHanSansCN;
    line-height: 21.26rpx;
    color: #333333e6;
  }

  .text {
    color: #333333;
    font-size: 30rpx;
    line-height: 22.76rpx;
  }

  .image {
    width: 34rpx;
    height: 22rpx;
  }

  .image_2 {
    width: 30rpx;
    height: 22rpx;
  }

  .image_3 {
    width: 48rpx;
    height: 22.66rpx;
  }

  .group_2 {
    padding: 20rpx 0 12rpx;
  }

  .image_4 {
    width: 18rpx;
    height: 34rpx;
  }

  .pos_2 {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  .text_2 {
    color: #ffffff;
    font-size: 36rpx;
    font-family: SourceHanSansCN;
    line-height: 33.74rpx;
    opacity: 0.9;
  }

  .section_2 {
    padding: 12rpx 24rpx;
    background-color: #ffffff99;
    border-radius: 50rpx;
    border-left: solid 1rpx #97979733;
    border-right: solid 1rpx #97979733;
    border-top: solid 1rpx #97979733;
    border-bottom: solid 1rpx #97979733;
  }

  .pos {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  .image-wrapper {
    width: 38rpx;
  }

  .image_6 {
    width: 38rpx;
    height: 14rpx;
  }

  .section_3 {
    background-color: #33333333;
    width: 1rpx;
    height: 37rpx;
  }

  .image_5 {
    width: 34rpx;
    height: 34rpx;
  }

  .section_4 {
    /* 修改距离 */
    margin-top: 0rpx;
    background-color: #f7f8fa;
    border-radius: 24rpx 24rpx 0rpx 0rpx;
    height: 1368rpx;
  }

  .group_3 {
    margin-top: -62rpx;
  }

  .group_4 {
    padding-top: 62rpx;
  }

  .text-wrapper {
    padding: 48rpx 0;
    background-color: #ffffff;
    border-radius: 24rpx 24rpx 0rpx 0rpx;
  }

  .font_2 {
    font-size: 32rpx;
    font-family: SourceHanSansCN;
    line-height: 30.3rpx;
    color: #333333;
  }

  .text_3 {
    color: #4c8eef;
    line-height: 30.02rpx;
  }

  .image_7 {
    border-radius: 16rpx;
    filter: drop-shadow(0rpx 2rpx 3rpx #00000033);
    width: 160rpx;
    height: 160rpx;
  }

  .pos_3 {
    position: absolute;
    left: 80rpx;
    top: 0;
  }

  .section_5 {
    padding: 28rpx 20rpx 16rpx 32rpx;
    background-color: #ffffff;
  }

  .list-item:first-child {
    margin-top: 0;
  }

  .group_5 {
    margin-right: 24rpx;
  }

  .image_8 {
    border-radius: 50%;
    width: 80rpx;
    height: 80rpx;
  }

  .font_4 {
    font-size: 28rpx;
    font-family: SourceHanSansCN;
    line-height: 25.84rpx;
    color: #333333;
  }

  .font_3 {
    font-size: 24rpx;
    font-family: SourceHanSansCN;
    line-height: 56rpx;
    color: #cccccc;
  }

  .text_4 {
    width: 250rpx;
  }

  .font_5 {
    font-size: 28rpx;
    font-family: SourceHanSansCN;
    line-height: 40rpx;
    color: #4d4d4d;
  }

  .equal-division {
    margin-right: 8rpx;
  }

  .image_9 {
    width: 220rpx;
    margin-right: 10rpx;
    margin-bottom: 10rpx;
    /* flex: 1 1 220rpx; */
  }

  .equal-division-item {
    height: 220rpx;
  }

  .group_6 {
    padding: 16rpx 8rpx 0;
    border-top: solid 1rpx #e5e5e5;
  }

  .image_10 {
    width: 44rpx;
    height: 44rpx;
  }

  .font_6 {
    font-size: 28rpx;
    font-family: SourceHanSansCN;
    line-height: 21.26rpx;
    color: #cccccc;
  }

  .group_7 {
    width: 225.12rpx;
  }

  .view {
    margin-right: 8rpx;
  }

  .image-wrapper_2 {
    width: 48rpx;
  }

  .image_11 {
    width: 48rpx;
    height: 48rpx;
  }

  .view_3 {
    margin-left: 8rpx;
  }

  .text_5 {
    line-height: 20.52rpx;
  }

  .view_2 {
    margin-left: 4rpx;
  }

  .image_12 {
    width: 44rpx;
    height: 38rpx;
  }

  .text-wrapper_2 {
    margin-left: 20rpx;
  }

  .text_6 {
    line-height: 20.88rpx;
  }

  .section_7 {
    background-color: #ffffff;
    border-radius: 0rpx;
    height: 30rpx;
  }
</style>